<template>
  <div class="basic-info-wrapper">
    <div class="flex flex-wrap justify-between">
      <div class="w-49 mb-5">
        <div class="mb-3 font-medium text-base">费用明细</div>
        <div class="flex bg-f7f8fa justify-evenly text-4e5969">
          <div class="w-full">
            <div class="flex flex-col justify-center items-center py-2.5 bg-eef0f4">
              <div>费用总额</div>
              <div class="text-1890ff">{{ amountCount.totalAmount ?? '-' }} 元</div>
            </div>
            <a-divider class="outline-e5e6eb" margin="0" />
            <div class="flex flex-col justify-center items-center py-4">
              <div class="mb-2">线上总额：{{ amountCount.totalOnlineAmount ?? '-' }} 元</div>
              <div>线下总额：{{ amountCount.totalOfflineAmount ?? '-' }} 元</div>
            </div>
          </div>
          <a-divider class="outline-e5e6eb" direction="vertical" margin="0" />
          <div class="w-full">
            <div class="flex flex-col justify-center items-center py-2.5 bg-eef0f4">
              <div>收款总额</div>
              <div class="text-1890ff">{{ amountCount.receivedAmount ?? '-' }} 元</div>
            </div>
            <a-divider class="outline-e5e6eb" margin="0" />
            <div class="flex flex-col justify-center items-center py-4">
              <div class="mb-2">线上实收：{{ amountCount.receivedOnlineAmount ?? '-' }} 元</div>
              <div>线下实收：{{ amountCount.receivedOfflineAmount ?? '-' }} 元</div>
            </div>
          </div>
          <a-divider class="outline-e5e6eb" direction="vertical" margin="0" />
          <div class="w-full">
            <div class="flex flex-col justify-center items-center py-2.5 bg-eef0f4">
              <div>付款总额</div>
              <div class="text-1890ff">{{ amountCount.payAmount ?? '-' }} 元</div>
            </div>
            <a-divider class="outline-e5e6eb" margin="0" />
            <div class="flex flex-col justify-center items-center py-4">
              <div class="mb-2">线上实收：{{ amountCount.payOnlineAmount ?? '-' }} 元</div>
              <div>线下实收：{{ amountCount.payOfflineAmount ?? '-' }} 元</div>
            </div>
          </div>
          <a-divider class="outline-e5e6eb" direction="vertical" margin="0" />
          <div class="w-full">
            <div class="flex flex-col justify-center items-center py-2.5 bg-eef0f4">
              <div>OTA对账总额</div>
              <div class="text-1890ff">{{ amountCount.statementTotalAmount ?? '-' }} 元</div>
            </div>
            <a-divider class="outline-e5e6eb" margin="0" />
            <div class="flex flex-col justify-center items-center py-4">
              <div class="mb-2">佣金：{{ amountCount.commissionAmount ?? '-' }} 元</div>
            </div>
          </div>
        </div>
      </div>
      <div class="w-49" v-if="amountCount.statementInfoList?.length">
        <div class="mb-3 font-medium text-base">结算明细</div>
        <div class="flex bg-f7f8fa justify-evenly text-4e5969">
          <template v-for="(item, index) in amountCount.statementInfoList" :key="item.feeStatusName">
            <div class="w-full">
              <div class="flex flex-col justify-center items-center py-2.5 bg-eef0f4">
                <div>{{ item.feeStatusName ?? '-' }}</div>
                <div class="text-1890ff">{{ item.totalAmount ?? '-' }} 元</div>
              </div>
              <a-divider class="outline-e5e6eb" margin="0" />
              <div class="flex flex-col justify-center items-center py-4">
                <div class="mb-2">收款：{{ item.collectAmount ?? '-' }} 元</div>
                <div>付款：{{ item.payAmount ?? '-' }} 元</div>
              </div>
            </div>
            <a-divider v-if="index < amountCount.statementInfoList.length" class="outline-e5e6eb" direction="vertical" margin="0" />
          </template>
        </div>
      </div>
      <div class="w-49" v-if="amountCount.depositInfoList?.length">
        <div class="mb-3 font-medium text-base">押金信息</div>
        <div class="flex flex-wrap text-4e5969">
          <template v-for="(item, index) in amountCount.depositInfoList" :key="item.depositName">
            <div class="flex mb-4">
              <div class="w-44 bg-f7f8fa">
                <div class="flex flex-col justify-center items-center py-2.5">
                  <div>{{ item.depositName }}</div>
                  <div class="text-1890ff">{{ item.amount ?? '-' }} 元</div>
                  <a-tag v-if="item.payTypeName" class="text-191c27" color="#E0E6F3">{{ item.payTypeName }}</a-tag>
                </div>
              </div>
              <a-divider v-if="index < amountCount.depositInfoList.length - 1" class="outline-e5e6eb" direction="vertical" margin="0" />
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
  <!-- 表格 -->
  <table-index class="insure-card-table" :table="tableCompulsory" @loadData="loadCompulsoryData">
    <template #payTypeNameList="{ record }">
      <span>
        {{ record.payTypeNameList?.join('、') }}
      </span>
    </template>
    <template #remark="{ record }">
      <div class="all-remark">
        {{ record.remark }}
      </div>
      <a-link v-if="record.remark" @click="onShowMoreRemark(record)">查看更多</a-link>
    </template>
  </table-index>

  <!-- 查看更多备注 -->
  <a-modal
    width="45vw"
    v-model:visible="showMoreRemarkModal"
    title="费用备注"
    ok-text="关闭"
    hide-cancel
    @before-open="beforeOpenRemark"
    @ok="showMoreRemarkModal = false"
  >
    <table-index :table="tableRemark" />
  </a-modal>
</template>

<script setup name="shortOrderCost" lang="ts">
  import { useTable } from '@/hooks/table'
  import { getShortOrdrFeeDetail, selectFeeItemName, feeAmountCount, remarkLogList } from '@/api/order/sOrder'
  import { ref, onMounted } from 'vue'

  const feeDetail = ref<any>({})
  const showMoreRemarkModal = ref(false)

  const props = defineProps({
    orderId: Number,
  })

  // 获取筛选费用名称
  const selectFeeName = ref([])
  const selectFeeNameLoading = ref(false)
  const getFeeItemName = () => {
    selectFeeNameLoading.value = true
    selectFeeItemName({ id: props.orderId })
      .then((res: any) => {
        selectFeeName.value = res.result.map((item: any) => {
          return {
            label: item,
            value: item,
          }
        })
      })
      .finally(() => {
        selectFeeNameLoading.value = false
      })
  }

  // table 配置
  const tableCompulsory = useTable({
    pagination: false,
    columns: [
      { title: '费用名称', dataIndex: 'itemName', width: 150, fixed: 'left' },
      { title: '总额(元)', dataIndex: 'amount', width: 150 },
      { title: '实结(元)', dataIndex: 'payAmount', width: 120 },
      { title: '未结(元)', dataIndex: 'waitPayAmount', width: 120 },
      { title: '生成节点', dataIndex: 'createNodeName', width: 90 },
      { title: '收支类型', dataIndex: 'costTypeName', width: 120 },
      { title: '结算状态', dataIndex: 'feeStatusName', width: 90 },
      { title: '收支方式', dataIndex: 'payTypeNameList', slotName: 'payTypeNameList', width: 140 },
      { title: '费用类型', dataIndex: 'feeTypeName', width: 120 },
      { title: '操作人', dataIndex: 'updateUserName', width: 120 },
      { title: '操作时间', dataIndex: 'updateTime', width: 180 },
      { title: '结算人', dataIndex: 'settlementUserName', width: 120 },
      { title: '结算时间', dataIndex: 'settlementTime', width: 180 },
      { title: '费用备注', dataIndex: 'remark', slotName: 'remark', width: 220 },
    ],
  })

  const tableRemark = useTable({
    pagination: false,
    columns: [
      { title: '创建时间', dataIndex: 'createTime' },
      { title: '操作人', dataIndex: 'createUserName' },
      { title: '备注信息', dataIndex: 'operateLog' },
    ],
  })

  const currentRemark = ref<any>({})
  const beforeOpenRemark = () => {
    tableRemark.tableLoading = true
    remarkLogList({ orderId: currentRemark.value.orderId, id: currentRemark.value.id })
      .then((res: any) => {
        tableRemark.dataList = res.result
      })
      .finally(() => {
        tableRemark.tableLoading = false
      })
  }

  const onShowMoreRemark = (record: any) => {
    console.log('onShowMoreRemark', record)
    currentRemark.value = record
    showMoreRemarkModal.value = true
  }

  const loadCompulsoryData = () => {
    tableCompulsory.tableLoading = true
    getShortOrdrFeeDetail({
      orderId: props.orderId,
    })
      .then((res: any) => {
        feeDetail.value = res.result
        const result = res.result

        tableCompulsory.dataList = result
      })
      .finally(() => {
        tableCompulsory.tableLoading = false
      })
  }

  // 获取费用总额
  const amountCount = ref<any>({})
  const getFeeAmount = () => {
    feeAmountCount({ orderId: props.orderId }).then((res: any) => {
      console.log('res', res)
      const { result } = res
      amountCount.value = result
    })
  }

  onMounted(() => {
    loadCompulsoryData()
    getFeeAmount()
    getFeeItemName()
  })
</script>

<style lang="less" scoped>
  .w-49 {
    width: 49.5%;
  }
  .bg-f7f8fa {
    background: #f7f8fa;
  }
  .bg-eef0f4 {
    background: #eef0f4;
  }
  .text-4e5969 {
    color: #4e5969;
  }
  .text-1890ff {
    color: #1890ff;
  }
  .outline-e5e6eb {
    border-color: #e5e6eb;
  }
  .text-191c27 {
    color: #191c27;
  }

  .all-remark {
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }
</style>
